<template>
    <div class="material-detail">
        <a-modal width="1200px" :visible="visible" :title="modalOption.title"
            @cancel="modalOption.onCancel" @ok="modalOption.onCancel" :cancelText="modalOption.cancelText"
            :okText="modalOption.okText"
            class="yuan-modal material-detail-modal">
            <a-spin tip="Loading..." :spinning="formLoading">
                <a-form-model layout="inline" class="yuan-form" ref="form" :model="formData"
                    :label-col="{ style: { width: '100px' } }" :wrapper-col="{ style: { width: 'calc(100% - 120px)' } }">
                    <div class="form-panel">
                        <div class="form-panel-box">

                            <a-form-model-item class="yuan-form-item" label="物料类型" prop="productType">
                                <span class="yuan-form-input">{{formData.productType}}</span>
                            </a-form-model-item>

                            <template v-if="formData.productType==='中药材'">
                                <!-- <a-form-model-item class="yuan-form-item" label="药材类别" prop="medicinalCategory">
                                    <span class="yuan-form-input">{{formData.medicinalCategory}}</span>
                                </a-form-model-item> -->
                                <a-form-model-item class="yuan-form-item" label="来源" prop="source">
                                    <span class="yuan-form-input">{{formData.source}}</span>
                                </a-form-model-item>

                                <a-form-model-item class="yuan-form-item" label="基原信息" prop="1">
                                    <span style="margin-right:15px">科：{{formData.subjectName || '--'}}</span>
                                    <span style="margin-right:15px">属：{{formData.genericName || '--'}}</span>
                                    <span style="margin-right:15px">种：{{formData.basinymName || '--'}}</span>
                                    <span>拉丁文名：{{formData.basinymLatin || '--'}}</span>
                                </a-form-model-item>

                            </template>
                            <div class="clear-both"></div>
                            <a-form-model-item class="yuan-form-item yuan-form-col3" label="品种" prop="varietyName">
                                <span class="yuan-form-input">{{formData.varietyName}}</span>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item yuan-form-col3" label="物料代码" prop="materialCode">
                                <span class="yuan-form-input">{{formData.materialCode}}</span>
                            </a-form-model-item>
                            <div class="clear-both"></div>

                            <template v-if="formData.productType==='成品'">
<!--                                <a-form-model-item class="yuan-form-item yuan-form-col3" label="存货代码" prop="inventoryCode">-->
<!--                                    <span class="yuan-form-input">{{formData.inventoryCode}}</span>-->
<!--                                </a-form-model-item>-->
                                <a-form-model-item class="yuan-form-item yuan-form-col3" label="产品大类" prop="productBigKind">
                                    <span class="yuan-form-input">{{formData.productBigKind}}</span>

                                </a-form-model-item>
                                <!-- <div class="clear-both"></div>
                                <a-form-model-item class="yuan-form-item yuan-form-col3" label="装量" prop="loadingQuantity">
                                    <span class="yuan-form-input">{{formData.loadingQuantity}}{{formData.unit}}</span>

                                </a-form-model-item>
                                -->
                                <a-form-model-item class="yuan-form-item yuan-form-col3" label="色卡颜色" prop="1">
                                    <span class="yuan-form-input"
                                        :style="{'width':'50px',height:'20px','display':'inline-block','background-color':formData.colorChart,'vertical-align':'sub'}"></span>
                                </a-form-model-item>
                                <div class="clear-both"></div>
                                <a-form-model-item class="yuan-form-item yuan-form-col3" label="规格" prop="specification">
                                    <span class="yuan-form-input">{{formData.specification}}</span>

                                </a-form-model-item>
                                <a-form-model-item class="yuan-form-item yuan-form-col3" label="贮藏" prop="stockpileCondition">
                                    <span class="yuan-form-input">{{formData.stockpileCondition}}</span>

                                </a-form-model-item>
                                <div class="clear-both"></div>
                                <a-form-model-item class="yuan-form-item yuan-form-col3" label="注意事项" prop="notes">
                                    <span class="yuan-form-input">{{formData.notes}}</span>

                                </a-form-model-item>
                                <a-form-model-item class="yuan-form-item yuan-form-col3" label="用法与用量" prop="usageAndDosage">
                                    <span class="yuan-form-input">{{formData.usageAndDosage}}</span>
                                </a-form-model-item>

                                <a-form-model-item class="yuan-form-item" label="功能与主治" prop="functionsOfCuring">
                                    <a-input type="textarea" style="width: 500px;" :rows="5" v-model="formData.functionsOfCuring"
                                        placeholder="请输入功能与主治" :maxLength="200" readonly />
                                    <div class="textarea-number">
                                        {{ formData.functionsOfCuring ? formData.functionsOfCuring.length : 0 }}/200
                                    </div>

                                </a-form-model-item>

                            </template>

                            <div class="clear-both"></div>
                            <template v-for="(item,idx) in addrList">
                                <a-form-model-item class="yuan-form-item" :label="'产地'+(idx+1)"
                                    prop="placeAreaCode" :key="'addr_'+idx+'_'+item.words">
                                    <span class="yuan-form-input">{{item.words}}</span>
                                </a-form-model-item>

                            </template>
                            <div class="clear-both"></div>
                            <a-form-model-item class="yuan-form-item" label="保质期" prop="expirationDate">
                                <span class="yuan-form-input">{{formData.expirationDate}}月</span>
                            </a-form-model-item>
                            <a-form-model-item v-if="formData.productType==='中药饮片'||formData.productType==='中药饮片(半成品)'" class="yuan-form-item" label="中药等级" prop="medicineClass">
                                <span class="yuan-form-input">{{formData.medicineClass}}</span>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="产品大类" prop="productBigKind">
                                <span class="yuan-form-input">{{formData.productBigKind}}</span>
                            </a-form-model-item>
                            <a-form-model-item v-if="formData.productType==='直服饮片'" class="yuan-form-item yuan-form-col3" label="包装形式" prop="packagingForm">
                                <span class="yuan-form-input">{{formData.packagingForm}}</span>
                            </a-form-model-item>
                        </div>

                    </div>
                </a-form-model>
            </a-spin>
        </a-modal>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Watch, Vue } from "vue-property-decorator";
import nextApi from "@/api/nextApi";
@Component({
    name: "Add",
})
export default class extends Vue {
    @Prop({ default: false }) visible!: boolean;
    @Prop({ default: "" }) infoId!: string;
    @Watch("visible")
    visibleChange() {
        if (this.visible) {
            this.getDetail();
        }
    }
    formLoading = false;
    modalOption = {
        title: "物料详情",
        okText: "确定",
        cancelText: "取消",
        onCancel: () => {
            this.closeModal();
        },
    };

    formData: any = {};
    resetForm() {
        this.formData = {};
    }
    async mounted() {
        this.resetForm();
    }
    closeModal() {
        this.resetForm();
        (this.$refs.form as any).resetFields();
        this.$emit("closeModal");
    }

    async getDetail() {
        this.formLoading = true;
        this.addrList = [];
        try {
            const res = await nextApi.getMaterialDetail({ id: this.infoId });
            this.formData = { ...res.data };
            this.addrList = res.data.placeOfOriginJSON.map((item) => ({ words: item }));
        } finally {
            this.formLoading = false;
        }
    }

    addrList: any[] = [];
}
</script>
<style lang="scss">
.material-detail-modal {
    .textarea-number {
        position: absolute;
        right: 10px;
        bottom: 2px;
        line-height: 20px;
        font-size: 12px;
    }
}
</style>
